<template>
	<view class="employment-container">
		<u-navbar title="人才超市" bgColor="transparent" :titleStyle="{'color':'#000', 'fontWeight': 600}">
			<view class="flex navigeter" slot="left">
				<view class="nav-left flex">
					<u-icon name="arrow-left" size="24" @tap="back"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
					<u-icon name="home" size="24" @tap="toHome"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="employment-banner">
			<!-- <view class="banner-text"></view> -->
			<view class="search-box">
				<view class="search-input bgFff flex-jus" @tap="nologinJump('/pages/search/index')">
					<u-search placeholder="输入你要找的岗位、招聘会…" disabled clearabled bgColor="#fff"
						:showAction="false"></u-search>
					<view class="search-btn">搜索</view>
				</view>
			</view>
		</view>
		<view class="menu-list">
			<view class="menu-item" v-for="(menu, index) in menuListData" :key="index" @tap="handleToNav(menu)">
				<view class="menu-icon-wrap">
					<image class="menu-icon" :src="menu.imgSrc"></image>
				</view>
				<text>{{ menu.subTitle }}</text>
			</view>
		</view>
		<view class="recommended-post">
			<view class="common-head">
				<text class="subtitle">招聘岗位</text>
				<!-- <view class="more-wrap" @tap="nologinJump('/subpage/talentemployment/employment/allpost')">
					<text>全部</text>
					<view class="right-arrow"></view>
				</view> -->
				<view class="filter-box" @click="open">
					<text>请添加您的求职意向</text>
					<view class="filter-icon"></view>
				</view>
			</view>
			<scroll-view class="station-tabs" scroll-x="true" show-scrollbar="false">
				<view class="station-tabs-content">
					<view v-for="(item, index) in stations" :key="index"
						:class="['station-item', {'active': curIndex === index}]" @tap="handleSelectStation(item, index)">
						{{ item.stationName }}
					</view>
				</view>
			</scroll-view>
			<x-skeleton type="list" :loading="loading">
				<view class="common-list" v-if="postList.length">
					<view class="common-item" v-for="item in postList" :key="item.id"
						@tap="nologinJump(`/subpage/talentemployment/employment/postinfo?id=${item.id}`)">
						<view class="common-name">
							<text class="name-text">{{ item.stationName }}</text>
							<text class="text-color" v-if="item.salaryRange !== '面议'">{{ item.salaryRange }}元</text>
							<text class="text-color" v-else>面议</text>
						</view>
						<view class="common-label">
							<text>{{ item.stationEdu }}</text>
							<text>{{ item.stationLesson }}</text>
							<text>招{{ item.recruitsNumber }}人</text>
						</view>
						<view class="common-footer">
							<text class="foot-text">{{ item.companyInfo.compName }}</text>
							<text class="foot-address">{{ item.stationAddr }}</text>
						</view>
					</view>
				</view>
				<view v-else class="no-data">
					<text>暂无数据</text>
				</view>
			</x-skeleton>
		</view>
		<resume-layer></resume-layer>
		<!-- 底部导航栏 -->
		<view class="bottom-bar">
			<view class="nav-list">
				<view class="nav-item" v-for="(item, index) in navList" :key="item.name" @click="handleNav(item)">
					<image :src="activeIndex === index ? item.iconActiveUrl : item.iconUrl" class="nav-icon" mode="">
					</image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>

		<view class="popup-container">
			<popup-layer ref="popupRef" direction="top" class="popup-content">
				<view class="popup-content-wrap">
					<view class="popup-item" v-for="(item,index) in dicList" :key="index">
						<text class="popup-subtitle">{{ item.title }}</text>
						<view class="labels">
							<text v-for="(dic, idx) in item.dicts" :key="dic"
								:class="['popup-label', { 'active': idx === item.activeIndex }]"
								@tap="handleSelect(item, dic, idx)">{{ dic }}</text>
						</view>
					</view>

					<view class="popup-item range">
						<text class="popup-subtitle">薪资范畴</text>
						<view class="labels">
							<input type="number" v-model="startSalary">
							<text class="sprate">至</text>
							<input type="number" v-model="endSalary">
						</view>
					</view>
					<view class="popup-footer">
						<button class="reset-btn" @tap="handleReset">重置</button>
						<button class="submit-btn" @tap="handleSearch">筛选</button>
					</view>
				</view>
			</popup-layer>
		</view>
	</view>
</template>

<script>
	import {
		recommendList,
		serachPost,
		dictionary,
		intentionList
	} from '@/common/api_employment.js'
	import {
		activityInfo
	} from '@/common/api_invitation.js'


	import resumeLayer from '@/components/resumeLayer/index.vue'
	import popupLayer from '@/components/popupLayer/index.vue'
	export default {
		components: {
			resumeLayer,
			popupLayer
		},
		data() {
			return {
				menuList: [
					{
						imgSrc: 'https://hxs.dsjhs.com:553/prod-api/profile/ksbm.png',
						subTitle: '考试报名',
						pagePath: '/subpage/examine/index'
					}, 
					{
						imgSrc: 'https://hxs.dsjhs.com:553/prod-api/profile/zph.png',
						subTitle: '招聘会',
						pagePath: '/subpage/talentemployment/jobfair/index'
					},
					// {
					// 	imgSrc: 'https://hxs.dsjhs.com:553/prod-api/profile/qcfy.png',
					// 	subTitle: '青春飞扬',
					// 	pagePath: '/subpage/invitation/activity'
					// },
					// {
					// 	imgSrc: 'https://hxs.dsjhs.com:553/prod-api/profile/zsb.png',
					// 	subTitle: '专升本',
					// },
					// {
					// 	imgSrc: 'https://hxs.dsjhs.com:553/prod-api/profile/jianli-icon.png',
					// 	subTitle: '我的简历',
					// 	pagePath: '/subpage/talentemployment/employment/addresume'
					// },
					// {
					// 	imgSrc: 'https://hxs.dsjhs.com:553/prod-api/profile/nenglicp-icon.png',
					// 	subTitle: '能力测评',
					// 	pagePath: '/subpage/caractere/index'
					// },  
					{
						imgSrc: 'https://hxs.dsjhs.com:553/prod-api/profile/jydt.png',
						subTitle: '就业云地图',
						appId: 'wx163161c0e1d0a6bb'
					},
					// {
					// 	imgSrc: 'https://hxs.dsjhs.com:553/prod-api/profile/lieping-icon.png',
					// 	subTitle: '猎聘',
					// }, 
					// {
					// 	imgSrc: 'https://hxs.dsjhs.com:553/prod-api/profile/gengduo-icon.png',
					// 	subTitle: '更多待开发',
					// },
				],
				postList: [],
				dicList: [],
				invitaInfo: {},
				// queryParams: {
				// 	pageNum: 1,
				// 	pageSize: 5
				// },
				loading: true,
				isActive: false,
				activeIndex: 0,
				navList: [{
					name: '首页',
					iconUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/home.png',
					iconActiveUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/home-a.png',
				}, {
					name: '单位',
					iconUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/danwei.png',
					iconActiveUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/danwei-a.png',
					path: '/subpage/talentemployment/employment/companylist'
				}, 
				{
					name: '我的考试',
					iconUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/wdks.png',
					iconActiveUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/wdks-a.png',
					path: '/subpage/examine/myexamine'
				}, 
				{
					name: '我的投递',
					iconUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/wdtd.png',
					iconActiveUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/wdtd-a.png',
					path: '/subpage/examine/mydelivery'
				}, {
					name: '我的简历',
					iconUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/wdjl.png',
					iconActiveUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/wdjl-a.png',
					path: '/subpage/talentemployment/employment/addresume'
				}],
				queryParams: {
					stationName: '',
					careerId: '',
					compType: '',
					compScale: '',
					stationEdu: '',
					stationLesson: '',
					stationAddr: '',
					salaryRange: '',
					pageNum: 1,
					pageSize: 10
				},
				stations: [{
					stationName: '全部岗位',
					id: ''
				}],
				current: 0,
				curIndex: 0,
				hasMore: true, // 是否有更多数据
				barStyle: {
					background: '#FFDE6D',
					height: '8rpx'
				},
				activeStyle: {
					fontSize: '32rpx',
					color: '#fff',
					fontWeight: 600
				}
			}
		},
		onLoad(option) {
			this.getDictionary()
		},
		onShow() {
			// console.log(this.hasLogin, 'hasLogin');
			// if (!this.hasLogin) {
			// 	this.toLogin()
			// 	return false
			// }
			this.getList()
			this.getStationList()
			this.getInvitationData()
		},
		onReachBottom() {
			console.log('到底了')
			if (this.hasMore) {
				this.getList()
			}
		},
		computed: {
			menuListData() {
				if (this.isActive) {
					return this.menuList
				} else {
					return this.menuList.filter(item => item.subTitle !== '青春飞扬')
				}
			}
		},

		onShareAppMessage(res) {
			return {
				title: '国企优选，诚引前路',
				path: '/subpage/talentemployment/employment/index',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			async getList() {
				const postData = await serachPost(this.queryParams)
				if (postData.data.length) {
					this.postList = this.postList.concat(postData.data)
					this.postList.forEach(item => {
						if (item.wrokPlaceType === 1) {
							item.stationAddr = item.companyInfo.compAddr
						}
					})
					this.queryParams.pageNum += 1
					this.loading = false
				} else {
					this.hasMore = false
					this.loading = false
				}

				this.$refs.popupRef.close()
			},
			async getInvitationData() {
				const inviData = await activityInfo()
				console.log(inviData, 'inviData')
				if (inviData.code === 200) {
					this.isActive = inviData.data.status === 1
					// this.invitaInfo = inviData.data
				}

			},
			async getStationList() {
				const res = await intentionList()
				if (res.code === 200) {

					this.stations = [{
						stationName: '全部岗位',
						id: ''
					}, ...res.data]
				}
				console.log(this.stations, 'this.stations')
			},
			handleNav(item) {
				uni.navigateTo({
					url: item.path
				})
			},
			toLogin() {
				uni.showModal({
					title: '提示',
					content: '请先完成登录',
					showCancel: false,
					confirmText: '去登录',
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/me/mobile_login'
							})
						}
					}
				})
			},
			back() {
				uni.navigateBack()
			},
			toHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			handleToNav(item) {
				console.log(item, 'item')
				if (item.pagePath) {
					uni.navigateTo({
						url: item.pagePath
					})
				} else if (item.appId) {
					uni.navigateToMiniProgram({
						appId: item.appId
					})
				} else {
					uni.showToast({
						title: '敬请期待',
						icon: 'none'
					})
				}
			},
			async getDictionary() {
				const dictionaryData = await dictionary()
				this.dicList = dictionaryData.data
				this.dicList.forEach(item => {
					item.dicts.unshift('不限')
					item.activeIndex = 0
				})
				console.log(dictionaryData, 'dictionaryData')
			},
			open() {
				// this.$refs.popupRef.show()
				uni.navigateTo({
					url: '/subpage/talentemployment/employment/hopework'
				})
			},
			handleSelectStation(item, index) {
				console.log(item, 'handleSelectStation');
				this.curIndex = index
				this.postList = []
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 10
				this.queryParams.stationName = index !== 0 ? item.stationName : ''
				this.queryParams.stationAddr = item.stationAddr || ''
				this.queryParams.salaryRange = item.salaryRange || ''
				this.getList()
			},
			// 筛选
			handleSelect(item, dic, idx) {
				item.activeIndex = idx
				this.queryParams[item.field] = dic === '不限' ? '' : dic

				console.log(this.dicList, idx, 'handleSelect')
			},
			handleSearch() {
				this.loading = true
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 999
				this.postList = []
				if (this.startSalary && this.endSalary) {
					this.queryParams.salaryRange = this.startSalary + '-' + this.endSalary
				}
				this.getList()
			},
			handleReset() {
				for (let key in this.queryParams) {
					if (key !== 'stationName' && key !== 'careerId') {
						this.queryParams[key] = ''
					}
				}
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 10
				this.startSalary = ''
				this.endSalary = ''
				this.dicList.forEach(item => {
					item.activeIndex = 0
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.employment-container {
		min-height: 100vh;
		padding-bottom: 180rpx;
		background-color: #F2F5FF;

		.navigeter {
			padding: 8rpx 24rpx;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 25px;

		}

		.employment-banner {
			position: relative;
			width: 100%;
			box-sizing: border-box;
			height: 300rpx;
			// background: url('https://hxs.dsjhs.com:553/prod-api/profile/work-banner.png') no-repeat center;
			// background-size: 100% 100%;

			.banner-text {
				position: absolute;
				left: 56rpx;
				bottom: 208rpx;
				width: 218rpx;
				height: 116rpx;
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/work-banner-text.png') no-repeat center;
				background-size: 100% 100%;
			}

			.search-box {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 96rpx;
				padding: 0 32rpx;
				box-sizing: border-box;

				.search-input {
					border-radius: 40rpx;
				}

				.search-btn {
					width: 160rpx;
					height: 96rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 96rpx;
					text-align: center;
					background: #FFDE6D;
					border-radius: 40rpx;
					backdrop-filter: blur(25px);
				}
			}
		}

		.menu-list {
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 34rpx;
			margin-bottom: 56rpx;
			padding: 0 32rpx;
			box-sizing: border-box;

			.menu-item {

				// width: 158rpx;
				// width: 128rpx;
				// height: 164rpx;		
				margin-right: 32rpx;


				.menu-icon-wrap {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 124rpx;
					height: 120rpx;
					margin-bottom: 24rpx;
					background: #FFFFFF;
					box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
					border-radius: 32rpx;
					box-sizing: border-box;

					.menu-icon {
						width: 72rpx;
						height: 72rpx;
					}
				}



				text {
					display: block;
					margin-top: 8rpx;
					font-weight: bold;
					font-size: 12px;
					color: #34314F;
					line-height: 28rpx;
					text-align: center;
				}

				&:nth-child(4n) {
					margin-right: 0;
				}
			}
		}

		.recommended-post {
			width: 100%;
			padding: 0 32rpx 32rpx;
			box-sizing: border-box;

			.common-head {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.subtitle {
					font-weight: 600;
					font-size: 36rpx;
					color: #34314F;
					line-height: 50rpx;
					text-align: left;
					font-style: normal;
				}

				.filter-box {
					position: relative;
					display: flex;
					// width: 192rpx;
					// padding: 8rpx 16rpx 12rpx 24rpx;
					height: 56rpx;
					// background: #E8EBF7;
					// border-radius: 40rpx;
					box-sizing: border-box;

					text {
						padding-left: 32rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #34314F;
						line-height: 56rpx;
					}

					.filter-icon {
						position: relative;
						top: 14rpx;
						margin-left: 8rpx;
						// right: 16rpx;
						// top: 12rpx;
						width: 32rpx;
						height: 32rpx;
						box-sizing: border-box;
						background: url('@/static/images/index/right-arrow.png') no-repeat center;
						background-size: 100% 100%;
					}
				}

				.more-wrap {
					position: relative;
					padding-right: 44rpx;
					box-sizing: border-box;

					text {
						font-size: 26rpx;
						color: #34314F;
						line-height: 50rpx;
						text-align: center;
					}

					.right-arrow {
						position: absolute;
						right: 0;
						top: 8rpx;
						display: block;
						width: 32rpx;
						height: 32rpx;
						background: url('@/static/images/index/right-arrow.png') no-repeat center;
						background-size: 100% 100%;
					}
				}

			}

			.station-tabs {
				width: 100%;
				margin-bottom: 32rpx;
				
				.station-tabs-content {
					display: flex;
					flex-wrap: nowrap;
					white-space: nowrap;
				}

				.station-item {
					position: relative;
					margin-right: 30rpx;
					padding: 0 10rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: rgba(52, 49, 79, 0.4);
					line-height: 44rpx;
					text-align: center;
					font-style: normal;
					white-space: nowrap;
					flex-shrink: 0;

					&::after {
						position: absolute;
						bottom: -4rpx;
						left: 0;
						display: block;
						width: 100%;
						height: 8rpx;
						background: transparent;
						content: '';
					}

					&.active {
						font-weight: 600;
						font-size: 16px;
						color: #0B0F12;
						line-height: 22px;
						text-align: center;
						font-style: normal
					}
				}

				.station-item.active::after {
					background: #FFDE6D;
				}
			}

			.common-list {
				.common-item {
					width: 100%;
					padding: 28rpx 32rpx 32rpx;
					margin-bottom: 24rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					border-radius: 40rpx;

					.common-name {
						display: flex;
						margin-bottom: 20rpx;
						justify-content: space-between;

						.name-text {
							font-weight: 600;
							font-size: 32rpx;
							color: #34314F;
							line-height: 22px;
						}

						.text-color {
							font-weight: 500;
							font-size: 32rpx;
							color: #FF7F1C;
							line-height: 22px;
						}
					}

					.common-label {
						display: flex;
						flex-wrap: nowrap;
						margin-bottom: 24rpx;

						text {
							display: block;
							margin-right: 16rpx;
							padding: 4rpx 12rpx;
							font-size: 24rpx;
							color: #34314F;
							line-height: 32rpx;
							border-radius: 8rpx;
							background-color: #F4F4F4;
							box-sizing: border-box;
						}
					}

					.common-footer {
						display: flex;
						flex-wrap: nowrap;
						justify-content: space-between;

						.foot-text {
							font-weight: 400;
							font-size: 26rpx;
							color: rgba(52, 49, 79, 0.7);
							line-height: 32rpx;
						}

						.foot-address {
							font-weight: 400;
							font-size: 26rpx;
							color: rgba(52, 49, 79, 0.5);
							line-height: 32rpx;
						}
					}
				}
			}

		}

		.bottom-bar {
			position: fixed;
			bottom: 20rpx;
			left: 0;
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;

			.nav-list {
				display: flex;
				justify-content: space-between;
				padding: 24rpx 28rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 32rpx;
				box-shadow: 0px 1px 8px 0px rgba(215, 220, 239, 0.57);

				.nav-item {
					text-align: center;

					.nav-icon {
						width: 48rpx;
						height: 48rpx;
						margin: 0 auto;
					}

					text {
						display: block;
						margin-top: 4rpx;
						font-weight: 600;
						font-size: 10px;
						color: #34314F;
						line-height: 18px;
						text-align: left;
						font-style: normal;
					}
				}
			}
		}

		.popup-content {
			width: 100%;
			height: 600px;
			border-radius: 20px;
			box-sizing: border-box;
			overflow-y: auto;

			.popup-content-wrap {
				// position: fixed;
				height: 600px;
				overflow-y: auto;
				padding: 50rpx 32rpx 40rpx 32rpx;
				box-sizing: border-box;
				width: 100%;
				box-sizing: border-box;
			}

			.popup-item {
				margin-bottom: 28rpx;

				&.range {
					padding-bottom: 80px;
				}

				.popup-subtitle {
					display: block;
					margin-bottom: 24rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 22px;
					text-align: left;
					font-style: normal
				}

				.labels {
					display: flex;
					flex-wrap: wrap;

					.popup-label {
						display: block;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #34314F;
						padding: 18rpx;
						border-radius: 16rpx;
						border: 1px solid rgba(52, 49, 79, 0.13);

						&.active {
							color: #FF7F1C;
							border: 1px solid #FF7F1C;
							background: rgba(255, 127, 28, 0.08);
						}
					}

					input {
						width: 200rpx;
						height: 76rpx;
						border-radius: 16rpx;
						text-align: center;
						border: 1px solid rgba(52, 49, 79, 0.13);
					}

					.sprate {
						font-size: 28rpx;
						color: #34314F;
						line-height: 76rpx;
						margin: 0 20rpx;
					}
				}

			}

			.popup-footer {
				position: fixed;
				bottom: 20rpx;
				left: 0;
				width: 100%;
				display: flex;
				padding-top: 30rpx;
				background-color: #fff;
				justify-content: space-around;
				z-index: 999;

				.reset-btn {
					margin-right: 32rpx;
					background-color: rgba(52, 49, 79, 0.06);
				}

				.submit-btn {
					background-color: rgba(255, 222, 109, 1);
				}

				button {
					width: 268rpx;
					height: 96rpx;
					border-radius: 40rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 96rpx;
					text-align: center;

					&::after {
						border: 0;
					}
				}
			}
		}


	}
</style>